<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/6/15
  Time: 下午12:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/resources.jsp" %>

<html>
<head>
    <title>接口测试</title>
    <script src="/ems/js/jsonFormat/jsonFormater.js"></script>
    <link rel="stylesheet" href="/ems/css/jsonFormat/jsonFormater.css"></link>
    <style type="text/css">
        #submitRequest {
            margin-left: 15px;
        }
    </style>
</head>
<body>
<div class="alert alert-danger" role="alert">目前测试只使用HTTP协议，提交方式固定为POST</div>
<div class="ems_form">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">接口测试</h3>
        </div>

        <form class="form-horizontal ems_internal_form">
            <div class="form-group">
                <label for="interfaceUrl" class="col-sm-3 control-label">接口地址：</label>
                <div class="col-sm-6">
                    <input type="text" required class="form-control" id="interfaceUrl" placeholder="接口地址">
                </div>
            </div>
            <div class="form-group">
                <label for="token" class="col-sm-3 control-label">Token：</label>
                <div class="col-sm-6">
                    <input type="text" required class="form-control" id="token" placeholder="无需Token不需要填写">
                </div>
            </div>
            <div class="form-group interface_params">
                <label class="col-sm-3 control-label">参数名：</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control"  placeholder="参数">
                </div>

                <label class="control-label" style="float: left;">参数值：</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control"  placeholder="参数值">
                </div>
                <button type="button" id="addMore" class="btn btn-success">继续添加</button>
            </div>

            <label class="col-sm-3 control-label"></label>
            <button type="button" id="submitRequest" class="btn btn-primary">提交请求</button>
        </form>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">结果</h3>
    </div>
    <div class="panel-body" id="jsonResult">
    </div>
</div>
<script>
    var jf = null;
    $(function () {
        $("#addMore").on("click",function () {
            var deleteHtml = ' <button type="button" class="btn btn-danger param_deleted">删除</button>'
            $(".form-group:last").after($(this).parents(".form-group").prop("outerHTML"));
            $(".form-group:last").find("button").remove().end().append(deleteHtml);

            $(".param_deleted").unbind("click").bind("click",function () {
                $(this).parents(".form-group").remove();
            })
        });

        $("#submitRequest").on("click",function () {

            var data = {};
            $(".interface_params").each(function (index,value) {
                var $key = $(value).find("input:first").val();
                if ($key == "") return true;
                data[$key] = $(value).find("input:last").val();
            });

            if ($.trim($("#token").val()) != "") {
                data["token"] = $.trim($("#token").val());
            }

            var interfaceUrl = $("#interfaceUrl").val();

            $.emsAjax({
                url:interfaceUrl,
                data:data,
                type:"POST",
                success:function (resp) {
                    if (!resp) {
                        $("#jsonResult").text("NULL");
                    }else {
                        $("#jsonResult").text(jf.doFormat(JSON.stringify(resp)));
                    }
                }
            });
        });

        //格式化JSON
        var options = {
            dom : '#jsonResult' //对应容器的css选择器
        };
        jf = new JsonFormater(options); //创建对象


        $("#interfaceUrl").val("http://localhost:9900/");
    });
</script>
</body>
</html>
